import React, { useState } from 'react';
import { Button, Form, Input, Select, DatePicker, Table, Tag, Space, Modal } from 'antd';
import './OrderTable.less';
import { useStore } from '../stores/index';

// 订单记录表
const OrderTable = ({ orders, onConfirm, onCancel }) => {
    const store = useStore();
    const userdata = store.userdata;
    const { isTeacher } = userdata;
    const [confirmModalOpen, setConfirmModalOpen] = useState(false); // 控制确认弹窗的显示
    const [cancelModalOpen, setCancelModalOpen] = useState(false); // 控制取消弹窗的显示
    const [selectedRecord, setSelectedRecord] = useState(null); // 当前选中的记录

    // 点击确认按钮
    const handleConfirmClick = (record) => {
        setSelectedRecord(record); // 设置选中的记录
        setConfirmModalOpen(true); // 显示确认弹窗
    };
    // 确认弹窗的确认操作
    const handleConfirmModalOk = () => {
        onConfirm(selectedRecord); // 执行确认操作
        setConfirmModalOpen(false); // 隐藏确认弹窗
    };
    // 确认弹窗的取消操作
    const handleConfirmModalCancel = () => {
        setConfirmModalOpen(false); // 隐藏确认弹窗
    };

    // 点击取消按钮
    const handleCancelClick = (record) => {
        setSelectedRecord(record); // 设置选中的记录
        setCancelModalOpen(true); // 显示取消弹窗
    };
    // 取消弹窗的确认操作
    const handleCancelModalOk = () => {
        onCancel(selectedRecord); // 执行取消操作
        setCancelModalOpen(false); // 隐藏取消弹窗
    };

    // 取消弹窗的取消操作
    const handleCancelModalCancel = () => {
        setCancelModalOpen(false); // 隐藏取消弹窗
    };

    // 表格列定义
    const columns = [
        {
            title: '订单 ID',
            dataIndex: 'orderId',
            key: 'orderId',
        },
        {
            title: '标题',
            dataIndex: 'orderTitle',
            key: 'orderTitle',
        },
        {
            title: '学生姓名',
            dataIndex:'studentName',
            key:'studentName',
        },
        {
            title: '家长确认',
            dataIndex: 'parentConfirmed',
            key: 'parentConfirmed',
            render: (confirmed) => (
                <Tag className='tag' color={confirmed? 'green' :'red'}>
                    {confirmed? '已确认' : '未确认'}
                </Tag>
            ),
        },
        {
            title: '教师姓名',
            dataIndex: 'teacherName',
            key: 'teacherName',
        },
        {
            title: '教师确认',
            dataIndex: 'teacherConfirmed',
            key: 'teacherConfirmed',
            render: (confirmed) => (
                <Tag className='tag' color={confirmed? 'green' :'red'}>
                    {confirmed? '已确认' : '未确认'}
                </Tag>
            ),
        },
        {
            title: '完成时间',
            dataIndex: 'completedAt',
            key: 'completedAt',
            render: (time) =>
                time
                   ? new Date(time).toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                    })
                    : '',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                record.completedAt? (
                    <Tag className='tag' color="rgb(49, 154, 25)">已完成</Tag>
                ) : (
                    <Space size="middle">
                        <Button
                            color="green"
                            onClick={() => handleConfirmClick(record)}
                            disabled={
                                isTeacher
                                   ? record.teacherConfirmed // 如果是教师，检查教师确认状态
                                    : record.parentConfirmed // 如果不是教师，检查家长确认状态
                            }
                        >
                            确认
                        </Button>
                        <Button danger onClick={() => handleCancelClick(record)}>
                            取消
                        </Button>
                    </Space>
                )
            ),
        },
    ];

    // 分页配置
    const pagination = {
        pageSize: 5, // 每页显示 5 条记录
        showSizeChanger: false,
    };

    return (
        <>
            {orders && (
                <Table
                    columns={columns}
                    dataSource={orders.map(order => ({...order, key: order.orderId }))}
                    pagination={pagination}
                />
            )}
            {/* 确认弹窗 */}
            <Modal
                title="确认操作"
                open={confirmModalOpen}
                onOk={handleConfirmModalOk}
                onCancel={handleConfirmModalCancel}
            >
                <p>确定要确认该条服务记录吗？</p>
            </Modal>
            {/* 取消弹窗 */}
            <Modal
                title="取消操作"
                open={cancelModalOpen}
                onOk={handleCancelModalOk}
                onCancel={handleCancelModalCancel}
            >
                <p>确定要删除该条服务记录吗？</p>
            </Modal>
        </>
    );
};

export default OrderTable;